<!DOCTYPE html>
<html>
    <head>
    	<title>Face detection</title>

    	<!-- Bootstrap core CSS -->
        <link href="../css/bootstrap.css" rel="stylesheet">
        <link rel="stylesheet" href="../css/highlight/styles/default.css">
        <script src="../css/highlight/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    	<script src="../../node_modules/jquery/dist/jquery.min.js"></script>

    	<style type="text/css">
			body {
			    position: relative;
			    min-height: 2000px;
			}
			.wrapper {
			    text-align: center;
			}

			.button {
			    position: absolute;
			    top: 50%;
			}

		</style>
    </head>
    <body>
    	<canvas id="myCanvas"></canvas>
    	<div class="wrapper">
    		<button type="button" class="btn btn-info" onclick = "location.href='dot_test.htm';">My face is captured correctly. Proceed to calibration.</button>
		</div>

        <script src="../searchgazer.js"></script>
        <script>
		window.onload = function() {
			window.localStorage.clear();
		    webgazer.setRegression('ridge') /* currently must set regression and tracker */
		        .setTracker('clmtrackr')
		        .setGazeListener(function(data, clock) {
		         //   console.log(data); /* data is an object containing an x and y key which are the x and y prediction coordinates (no bounds limiting) */
		         //   console.log(clock); /* elapsed time in milliseconds since webgazer.begin() was called */
		        })
		        .begin()
		        .showPredictionPoints(false); /* shows a square every 100 milliseconds where current prediction is */

		    var width = 320;
		    var height = 240;
		    var topDist = '0px';
		    var leftDist = '0px';
		    
		    var setup = function() {
		        var video = document.getElementById('webgazerVideoFeed');
		        video.style.display = 'block';
		        video.style.position = 'absolute';
		        video.style.top = topDist;
		        video.style.left = leftDist;
		        video.width = width;
		        video.height = height;
		        video.style.margin = '0px';

		        webgazer.params.imgWidth = width;
		        webgazer.params.imgHeight = height;

		        var overlay = document.createElement('canvas');
		        overlay.id = 'overlay';
		        overlay.style.position = 'absolute';
		        overlay.width = width;
		        overlay.height = height;
		        overlay.style.top = topDist;
		        overlay.style.left = leftDist;
		        overlay.style.margin = '0px';

		        document.body.appendChild(overlay);

		        var cl = webgazer.getTracker().clm;

		        function drawLoop() {
		            requestAnimFrame(drawLoop);
		            overlay.getContext('2d').clearRect(0,0,width,height);
		            if (cl.getCurrentPosition()) {
		                cl.draw(overlay);
		            }
		        }
		        drawLoop();
		    };

		    function checkIfReady() {
		        if (webgazer.isReady()) {
		            setup();
		        } else {
		            setTimeout(checkIfReady, 100);
		        }
		    }
		    setTimeout(checkIfReady,100);

	        window.onbeforeunload = function() {
		        webgazer.end();
		    };

		};
        </script>
	</body>
</html>
